<template>
	<z-nav-bar title="我的体系课"></z-nav-bar>
	<view class="announcement flex_fsc">
		<image :src="setting.oss_pub_domain + '/app-img/icon/icon_horn.png'" class="icon-size-32"></image>
		<view class="uni-585C66 uni-ml-16">体系课生成后需要审核通过后才能在球员端展示</view>
	</view>
	<view v-if="data.list && data.list.length">
		<view v-for="(item, index) in data.list" :key="item.id">
			<view class="course-item flex_fsc">
				<image :src="setting.oss_pub_domain + item.material" class="img"></image>
				<view style="width: 100%">
					<view class="z-font-32">{{ item.name }}</view>
					<view class="z-font-24 uni-color-grey uni-mt-8">
						关联课程:{{
							item.relCourse ? item.relCourse.split(',').length - 1 : 0
						}}个&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;兑换:{{ item.exchange }}积分
					</view>
					<view class="flex_sbc z-font-24">
						<view :class="item.isUp ? 'uni-color-main' : 'color-C4C7CC'">
							{{ statusList[item.isUp] }}
						</view>
						<image
							:src="setting.oss_pub_domain + '/app-img/icon/icon_edit.png'"
							class="icon-size-32"
							@click="editOpenCourse(index)"
						></image>
					</view>
				</view>
			</view>
			<view class="line-spacing"></view>
			<view v-for="(course, cindex) in item.courseList" :key="course.id">
				<view v-if="cindex < 5 || item.ext" class="course-title flex_fsc">
					<view class="dot"></view>
					<view class="uni-color-grey uni-mr-24">课程</view>
					<view>{{ course.name }}</view>
				</view>
			</view>
			<view
				v-if="item.courseList && item.courseList.length && item.courseList.length > 5"
				class="uni-color-main-grey text-c"
				@click="item.ext = !item.ext"
			>
				{{ item.ext ? '收起' : '展开' }}
			</view>
		</view>
	</view>
	<z-no-data v-else placeholder="暂无课程包" width="400"></z-no-data>
	<bottom-box :buts="buts" @change="addOpenCourse"></bottom-box>
</template>

<script setup>
import { getOpenCourseList } from '@/api/course.js';
import { onReachBottom } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();

const statusList = ['编辑中', '审核中', '已上架', '驳回'];

const data = reactive({
	list: [],
	total: 0,
	pageSize: 10,
	pageNum: 1
});

fetch();
function fetch(query = {}) {
	getOpenCourseList({ pageSize: data.pageSize, pageNum: data.pageNum, ...query }).then((res) => {
		if (data.pageNum === 1) {
			data.list = res.rows;
		} else {
			data.list.push(...res.rows);
		}
		data.total = res.total;
	});
}
onReachBottom(() => {
	if (data.list.length === data.total) return;
	data.pageNum += 1;
	fetch();
});

//  编辑体系课
function editOpenCourse(index) {
	const item = data.list[index];
	uni.setStorageSync('open-course', item);
	uni.navigateTo({
		url: '/pages/course/open-course/edit/edit',
		events: {
			editDone: () => {
				data.pageNum = 1;
				that.tools.alert('编辑完成');
				fetch();
				that.$forceUpdate();
			}
		}
	});
}

const buts = [
	{
		label: '新建体系课',
		bgColor: '#008965'
	}
];

function addOpenCourse() {
	uni.setStorageSync('open-course', {});
	uni.navigateTo({
		url: '/pages/course/open-course/edit/edit',
		events: {
			editDone: (data) => {
				data.pageNum = 1;
				fetch();
				that.$forceUpdate();
			}
		}
	});
}
</script>

<style lang="scss" scoped>
@import 'open-course.scss';
</style>
